/* default default
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}


blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration:none;}
a:hover {text-decoration:underline;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #aaa; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	display: block;
	padding: 9.5px;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 20px;
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre;
	white-space: pre-wrap;
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.15);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  



/* Stylings
-------------------------------------------------------------------------------*/

body {
	color:#1b2f01;
	font-family:"Open Sans"; font-size:14px;
	background:#fff;
}

#page-wrap {width:1000px; margin:0px auto; border:1px solid #fff; padding:20px;}

header {background:#fff; padding:10px 20px 12px 20px; position:relative;
-moz-box-shadow: 1px 1px 12px 2px #aaa;
-webkit-box-shadow: 1px 1px 12px 2px #aaa;
box-shadow:         1px 1px 12px 2px #aaa;
border-radius:12px 12px 0px 0px;
}

header a {color: #1b2f01; text-decoration:none;}
header a:hover {text-decoration:underline;}


#logo{background:url('../img/logo.png'); width:150px; height:150px; margin:0px 20px 0px 10px;}
#logo-title{}

.newsimg {float:left; width:150px; margin:4px 12px 0px 0px;}

.newsimg_large {float:left; width:300px; margin:4px 12px 0px 0px;}

.libimg { border: 1px; border-style: solid; margin: 0 0.6em; }

#donate {margin-top:10px;}
#donate h4 {margin-bottom:5px; font-weight:600;}
	
a:hover img {
border: none !important;
opacity:0.8;
}

#page-content {
	background:#ffffe5; /* #FFFFE5 BACKGROUND_COLOR - pale yellow/cream from colormap.cc */																					 
	position:relative; padding:20px 20px 0px 20px;
	-moz-box-shadow: 1px 1px 12px 2px #aaa; -webkit-box-shadow: 1px 1px 12px 2px #aaa; box-shadow: 1px 1px 12px 2px #aaa;
	border-radius:0px 0px 12px 12px;
}

#sidebar{width:220px; padding:10px; float:left; background:#fff; border-radius:8px; border:1px solid #ddd; margin-bottom:20px;}

.sticky-wrapper {float:left; padding:0px 0px 0px 0px; margin-right:20px;}

#sidebar.stuck {position:fixed; top:0; margin-top:20px;}
#sidebar div.title.top {visibility:hidden; margin-bottom:-20px; text-transform:lowercase;}
#sidebar.stuck div.title.top {visibility:visible; margin-bottom:-3px;}

//#sidebar .current {text-decoration:underline;}

article{width:695px; float:left; margin-left:20px; padding:0px; }
article.full{}

section {margin-bottom:20px; background:#fff; border-radius:8px; border:1px solid #ddd; padding:10px 20px 20px 20px;}
.subsection {margin-bottom:20px;}
.subsection:last-child {margin-bottom:0px;}
img.github-ribbon {float: right; position: relative; top: 0; right: 0; border: 0;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection {background: #000; color: #fff; text-shadow: none;}
::selection {background: #000; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #1b2f01;} 

a {color:#1b2f01; font-weight:600;}

.imgLink:hover{opacity:0.8;}

ins {background-color: #fcd700; color: #1b2f01; text-decoration: none;}
mark {background-color: #fcd700; color: #1b2f01; font-style: italic; font-weight: bold;}

.green{color:#518e04;}

p {padding:0px 0px 5px 0px; line-height:160%;}

.entry p {padding:0px 0px 15px 0px; line-height:160%;}

section ul li{padding-left:10px;}

small {font-size:11px;}

dt {font-weight: bold;}

button {padding:5px 5px 10px 5px; margin-bottom:10px;}
button.left {margin-right:5px;}
button.last {clear:both;}

h1 a, h2 a, h3 a, h4 a, h5 a{text-decoration:none;}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover{text-decoration:underline;}

h1 {font-size:18px; line-height:150%; padding-bottom:10px;}
h2 {font-size:15px; line-height:150%; padding-bottom:5px;}
h3 {font-size:13px; line-height:150%; padding-bottom:2px}
h4 {font-size:12px; line-height:150%; padding-bottom:2px;}
h5 {font-size:11px; line-height:150%; padding-bottom:2px;}


header h1 {font-size:28px; margin:0px; padding:0px; font-weight:600; line-height:140%;}
header h2 {font-size:20px; margin:0px; padding:0px; font-weight:600; line-height:100%;}
header h3 {font-size:16px; margin:0px; padding:0px; font-weight:600; line-height:100%;}
header h4 {font-size:12px; margin:0px; padding:0px; font-weight:500; line-height:100%;}

/* colour the header 'Open' & 'SCAD' and make bolder and chunky
like the cornfield default scheme from colormap.cc
Open - #9dcb51;} OPENCSG_FACE_BACK_COLOR - green
SCAD - #f9d72c;} OPENCSG_FACE_FRONT_COLOR - yellow
 - for reference #FFFFE5;} BACKGROUND_COLOR - pale yellow/cream, used above 
*/
header h1.title {color:#f9d72c; letter-spacing:-1px; font-weight:700;}
header h1 span.green {color:#9dcb51; letter-spacing:0px;}

header h2.subtitle {color:black; letter-spacing:-1px;}

/* colour OPEN & SCAD in the home sub-page heading the same*/
section h1 strong {color:#f9d72c; font-weight:700; letter-spacing:-1px;}
section h1 strong span.green {color:#9dcb51; letter-spacing:0px;}

.clear {clear:both;}
.left {float:left;}
.right {float:right;}

.inline {display:inline;}
.block {display:block;}

.align-left {text-align:left;}
.align-right {text-align:right;}
.justify {text-align:justify;}

.normal {font-weight:normal;}

ol{
	list-style-position: inside; padding-bottom:20px;
}
ul{
	list-style-position: inside; padding-bottom:10px;
}

strong {font-weight:600;}

ul a{text-decoration:none;}
ul a:hover{text-decoration:underline;}

ul.bullet {list-style-type:disc; list-style-position:inside;}
ul.indent {padding-left:20px;}
ul.bullet li{line-height:200%;}

li{line-height:180%;}

#navigation {text-align:right; margin-top:35px;}

#navigation-inner {
	margin-left: 0px;
	display:inline;
}

#navigation ul {
	position: relative;
	list-style: none;
	display:inline;
}

.nav-divider{
	padding:0px 10px;
}

#navigation ul li {
	display:inline;
	position: relative;
	line-height:100%;
	letter-spacing:0px;
	font-size:14px;
	font-weight:500;
	padding:4px 10px 5px 10px;
	margin:0px 3px;
}

#navigation ul li:last-child {
	//padding:0px;
}

#navigation ul li.current {border-radius:8px; background:#f2f2ee; border:1px solid #ddd; padding:3px 9px 4px 9px;}

#navigation ul li:last-child .nav-divider {
	display:none;
}

#navigation ul li a {
	text-transform:lowercase;
}

/* Navbar Hover Links */

#navigation ul li:hover	{
}


#navigation ul li a:hover {
	position: relative;
	text-decoration: underline;
}

#navigation ul li:hover li a {

}

/* Navbar Active Links */

#navigation ul li.active a {
/*	border-bottom: 1px solid #333; */

}


#home-download {text-align:center; position:relative; margin-top:0px; height:130px; left:150px; width:355px;}

#home-download-link {position:absolute; top:10px; background:#e5f1d3; height:55px; width:350px; border-radius:12px; border:4px solid #233d00;}

#home-download-logo {position:absolute; background:url('../img/download.png'); height:106px; width:101px;}

.underline {text-decoration:underline;}

a.underline:hover {text-decoration:none;}

a:hover #home-download-link{
	opacity:0.8;
}

a:active #home-download-link{
	top:11px; left:1px;
}

.store-button {text-align:center; display:inline-block; padding:8px;}
.download-button {background:#e5f1d3; border-radius:12px; border:4px solid #233d00; text-align:center; display:inline-block; padding:8px; margin:8px;}

.tutorial-links {width:640px; height:200px; border-top:1px solid #ddd; padding:30px 0px 40px 0px; }

.tutorial-links:hover {opacity:0.8;}
.tutorial-links img {border:1px solid #ddd; border-radius:8px;}
.tutorial-links iframe {border:1px solid #ddd; border-radius:8px;}
.tutorial-links .img-container {float:left; width:320px; margin-right:20px;}
.tutorial-links .img-title {float:left; width:300px; font-size: 50%; font-weight: normal; font-family: sans-serif; }
.tutorial-links .text-container {float:left; width:300px;}

.tutorial-links.multi:hover {opacity:1;}

.gallery-links {float:left; width:140px; height:170px; padding:30px 20px 20px 0px; }
.gallery-links a:hover {opacity:0.8;}
.gallery-links img {border:1px solid #ddd; border-radius:8px;}
.gallery-links iframe {border:1px solid #ddd; border-radius:8px;}
.gallery-links .img-container {float:left; width:140px; margin-right:20px;}
.gallery-links .text-container {float:left; width:140px;}


footer {clear:both;}

span.link {cursor:pointer;}
span.link:hover {text-decoration:underline;}
.tutorial-links .current {text-decoration:underline;}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}

/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
			
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}

/* Social media icons */
 
i.fab {
	width: 30px;
	height: 30px;
	font-size: 25px;
	text-align: center;
	padding-top: 5%;
}

.fa-twitter {
	color:#00aced
}

